﻿<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="Friends.ascx.cs" Inherits="Skecthial.UI.Controls.Friends" %>
<style type="text/css">
    .uj {
        -webkit-border-radius: 6px;
        -moz-border-radius: 6px;
        border-radius: 6px;
        -webkit-box-shadow: 0 1px 0 #aaa;
        -moz-box-shadow: 0 1px 0 #aaa;
        box-shadow: 0 1px 0 #aaa;
        background-color: #F4F4F4;
        background-image: -webkit-linear-gradient(top,white,#F4F4F4);
        background-image: -moz-linear-gradient(top,white,#F4F4F4);
        background-image: -ms-linear-gradient(top,white,#F4F4F4);
        background-image: -o-linear-gradient(top,white,#F4F4F4);
        background-image: linear-gradient(top,white,#F4F4F4);
        width: 160px;
        height: 80px;
        text-align: left;
        display: inline-block;
        text-decoration: none;
    }
        .uj:hover {
        background-color: #CCC;
        background-image: -webkit-linear-gradient(top,white,#CCC);
        background-image: -moz-linear-gradient(top,white,#CCC);
        background-image: -ms-linear-gradient(top,white,#CCC);
        background-image: -o-linear-gradient(top,white,#CCC);
        background-image: linear-gradient(top,white,#CCC);
        }
        .uj img {
            padding-left: 5px;
            padding-top: 10px;
        }

    .Qf {
        border: none;
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        border-radius: 0;
    }

    .bo {
        font-size: 12px;
        overflow: hidden;
        padding: 2px 4px 2px 4px;
        word-wrap: break-word;
        text-align: left;
        color: #505050;
    }

    .friends {
        text-align: center;
        text-decoration: none;
    }
</style>
<div class="friends">
    <asp:Repeater ID="rptFriends" runat="server">
        <HeaderTemplate></HeaderTemplate>
        <ItemTemplate>
                <a href='<%# Eval("link") %>' target="_blank">
                    <div class="uj">
                        <table>
                            <tr>
                                <td>
                                    <img src='<%# Eval("picture") %>' width="48px" height="48px" class="Qf" style="width: 48px;
                                        height: 48px;"></td>
                                <td>
                                    <div class="bo">
                                        <%# Eval("first_name") %>
                                        <%# Eval("middle_name") %>
                                        <%# Eval("last_name") %>
                                    </div>
                                </td>
                            </tr>
                        </table>
                    </div>
                </a>

        </ItemTemplate>
        <FooterTemplate></FooterTemplate>
    </asp:Repeater>
</div>
